<template>
	 <div class="classItem">
    <div class="title">
      <i class="icon-logo"></i>精品推荐 <a href="#/list/all" class="labs">查看全部</a>
    </div>
    
    <div class="content">
      <!-- 循环遍历条目 -->
      <div>
        <a href="#/detail/12">
          <div class="item">
            <div class="iconInfo"><img src="holder.js/200x200" alt=""></div>
            <div class="info">
              <div class="tit">Lorem ipsum dolor sit.</div>
              <div class="des">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, illo.</div>
              <div class="rank"><em>高级</em>
              <i>●</i> 10人在学习</div>
            </div>
          </div>
        </a>
      </div>
      <div>
        <a href="#/detail/12">
          <div class="item">
            <div class="iconInfo"><img src="holder.js/200x200" alt=""></div>
            <div class="info">
              <div class="tit">Lorem ipsum dolor sit.</div>
              <div class="des">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, illo.</div>
              <div class="rank"><em>高级</em>
              <i>●</i> 10人在学习</div>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</template>
<script>
	export default {
		data: function () {
			return {
				searchName: '',
				width: '',
				msg: '课程页面展示课程',
				imgBaseUrl: ''
			};
		}
	}
</script>
<style lang="scss">
  @import "../assets/baseScss.scss";
  .classItem{
    padding:10px;text-align: left;
    .title{
      text-align: left;font-size: 18px;padding: 5px 0;color: $cl0;position: relative;margin: 5px 0;
      i:before{font-size: 15px;color:$cl0;margin-right: 3px;}
      .labs{
        position: absolute;right: 10px;font-size: 12px;color: $cl7;top:8px;
      }
    }
    .content{
      .item{
        display: flex;margin-bottom: 5px;
        .iconInfo{flex:2;margin-right: 5px;}
        .info{
          flex:3;
          .tit{font-size: 16px; color:$cl3;height: 20px;overflow: hidden}
          .des{font-size: 12px; color:$cl6;height: 40px;line-height:20px; overflow: hidden; margin: 5px 0;}
          .rank{
            font-size: 14px; color:$cl6; height: 20px;overflow: hidden;
            i{color:$cl9;}
            em{color:$cl15;}
          }
        }
      }
      .loading{
        text-align: center;
      }
      .loadNone{
        font-size: 12px;color:#999;text-align: center;
      }
    }
  }
</style>
